<template>
  <div class="qq_RankList" id="content">
    <div class="qq_RankList_section_inner">
      <div class="index__hd">
        <h2 class="index__tit"><i class="icon_txt"></i></h2>
      </div>
      <a class="index__more" href="#"> 更多><i class="icon_index_arrow sprite"></i> </a>
      <div class="qq_RankList_mod_playlist">
        <div class="qq_RankList_slide__list">
          <ul class="qq_RankList_playlist__list">
            <li class="qq_RankList_playlist__item">
              <div class="qq_RankList_toplist__box">
                <div class="toplist__bg"></div>
                <!-- <i class="mod_cover__icon_play"></i>
                <i class="toplist__line"></i> -->

                <h3 class="toplist__head">
                  <a class="toplist__tit" href="#">热歌</a>
                </h3>
                <div class="play_line">
                  <span></span>
                </div>
                <ul class="toplist__songlist">
                  <li class="toplist__song">
                    <div class="toplist__number">1</div>
                    <div class="toplist__songname"><a href="#">爱都爱了</a></div>
                    <div class="toplist__artist"><a href="#">小洲</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">2</div>
                    <div class="toplist__songname"><a href="#">妈妈的话</a></div>
                    <div class="toplist__artist"><a href="#">Zyboy忠宇</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">3</div>
                    <div class="toplist__songname"><a href="#">在你的身边</a></div>
                    <div class="toplist__artist"><a href="#">盛哲</a></div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="qq_RankList_playlist__item">
              <div class="qq_RankList_toplist__box">
                <div class="toplist__bg"></div>
                <!-- <i class="mod_cover__icon_play"></i>
                <i class="toplist__line"></i> -->

                <h3 class="toplist__head">
                  <a class="toplist__tit" href="#">热歌</a>
                </h3>
                <div class="play_line">
                  <span></span>
                </div>
                <ul class="toplist__songlist">
                  <li class="toplist__song">
                    <div class="toplist__number">1</div>
                    <div class="toplist__songname"><a href="#">爱都爱了</a></div>
                    <div class="toplist__artist"><a href="#">小洲</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">2</div>
                    <div class="toplist__songname"><a href="#">妈妈的话</a></div>
                    <div class="toplist__artist"><a href="#">Zyboy忠宇</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">3</div>
                    <div class="toplist__songname"><a href="#">在你的身边</a></div>
                    <div class="toplist__artist"><a href="#">盛哲</a></div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="qq_RankList_playlist__item">
              <div class="qq_RankList_toplist__box">
                <div class="toplist__bg"></div>
                <!-- <i class="mod_cover__icon_play"></i>
                <i class="toplist__line"></i> -->

                <h3 class="toplist__head">
                  <a class="toplist__tit" href="#">热歌</a>
                </h3>
                <div class="play_line">
                  <span></span>
                </div>
                <ul class="toplist__songlist">
                  <li class="toplist__song">
                    <div class="toplist__number">1</div>
                    <div class="toplist__songname"><a href="#">爱都爱了</a></div>
                    <div class="toplist__artist"><a href="#">小洲</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">2</div>
                    <div class="toplist__songname"><a href="#">妈妈的话</a></div>
                    <div class="toplist__artist"><a href="#">Zyboy忠宇</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">3</div>
                    <div class="toplist__songname"><a href="#">在你的身边</a></div>
                    <div class="toplist__artist"><a href="#">盛哲</a></div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="qq_RankList_playlist__item">
              <div class="qq_RankList_toplist__box">
                <div class="toplist__bg"></div>
                <!-- <i class="mod_cover__icon_play"></i>
                <i class="toplist__line"></i> -->

                <h3 class="toplist__head">
                  <a class="toplist__tit" href="#">热歌</a>
                </h3>
                <div class="play_line">
                  <span></span>
                </div>
                <ul class="toplist__songlist">
                  <li class="toplist__song">
                    <div class="toplist__number">1</div>
                    <div class="toplist__songname"><a href="#">爱都爱了</a></div>
                    <div class="toplist__artist"><a href="#">小洲</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">2</div>
                    <div class="toplist__songname"><a href="#">妈妈的话</a></div>
                    <div class="toplist__artist"><a href="#">Zyboy忠宇</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">3</div>
                    <div class="toplist__songname"><a href="#">在你的身边</a></div>
                    <div class="toplist__artist"><a href="#">盛哲</a></div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="qq_RankList_playlist__item">
              <div class="qq_RankList_toplist__box">
                <div class="toplist__bg"></div>
                <!-- <i class="mod_cover__icon_play"></i>
                <i class="toplist__line"></i> -->

                <h3 class="toplist__head">
                  <a class="toplist__tit" href="#">热歌</a>
                </h3>
                <div class="play_line">
                  <span></span>
                </div>
                <ul class="toplist__songlist">
                  <li class="toplist__song">
                    <div class="toplist__number">1</div>
                    <div class="toplist__songname"><a href="#">爱都爱了</a></div>
                    <div class="toplist__artist"><a href="#">小洲</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">2</div>
                    <div class="toplist__songname"><a href="#">妈妈的话</a></div>
                    <div class="toplist__artist"><a href="#">Zyboy忠宇</a></div>
                  </li>
                  <li class="toplist__song">
                    <div class="toplist__number">3</div>
                    <div class="toplist__songname"><a href="#">在你的身边</a></div>
                    <div class="toplist__artist"><a href="#">盛哲</a></div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "RankList",
};
</script>

<script lang="ts" setup></script>

<style scoped>
/* 第六部分 */
.index__hd {
  position: relative;
  padding-top: 4.16667%;
  padding-bottom: 2%;
}
.index__hd .index__tit {
  margin: 0 auto;
  width: 196px;
  height: 40px;
  font-weight: bold;
  font-style: normal;
  /* background-image: url("./bac.png"); */
  background-image: -webkit-image-set(url("/src/assets/bac.png") 1x, url("/src/assets/bac.png") 2x);
  background-position: 0 140px;
}
.qq_RankLis {
  height: 808px;
  background-color: #fafafa;
}
.qq_RankList_section_inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.qq_RankList_section_inner a.index__more {
  position: absolute;
  right: 0;
  top: 55px;
}
.qq_RankList_section_inner .qq_RankList_playlist__list {
  height: 616px;
  width: 1220px;
  font-size: 0;
}
.qq_RankList_playlist__item {
  height: 500px;
  display: inline-block;
  width: 224px;
  margin-right: 20px;
  padding-bottom: 25px;
  box-sizing: border-box;
  padding-right: 0px !important;
  background-color: #6bbcb3;
  text-align: center;
}
.qq_RankList_playlist__item .toplist__head:before {
  content: "巅峰榜";
  display: block;
  width: 100%;
  height: 22px;
  text-align: center;
  font-size: 20px !important;
  /* border: 1px solid red; */
  margin: 65px auto 9px;
}
.qq_RankList_playlist__item .toplist__head a {
  height: 36px;
  line-height: 36px;
  font-size: 26px;
  color: #fff;
  font-weight: 400;
  width: 100%;
  display: inline-block;
  text-align: center;
}
.qq_RankList_playlist__item .play_line {
  height: 49px;
  width: 49px;
  text-align: center;
  line-height: 49px;
  /* border: 1px solid red; */
  display: inline-block;
  margin-top: 5px;
}
.qq_RankList_playlist__item .play_line span {
  display: inline-block;
  width: 38px;
  border-top: 3px solid #fafafa;
}
.qq_RankList_playlist__item .toplist__songlist {
  width: 164px;
  height: 222px;
  display: inline-block;
  margin-left: 30px;
  text-align: left;
  color: #fff;
}
.qq_RankList_toplist__box {
  font-size: 14px;
}
.qq_RankList_playlist__item .toplist__songlist .toplist__song {
  position: relative;
  width: 179px;
  height: 47px;
  margin-bottom: 27px;
  margin-top: 10px;
}
.qq_RankList_playlist__item .toplist__songlist .toplist__song a {
  color: #fff;
}
.qq_RankList_playlist__item .toplist__songlist .toplist__number {
  position: absolute;
  left: -15px;
  right: 0;
}
</style>
